<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" :width="1300" destroy-on-close @closed="$emit('closed')" align-center :close-on-click-modal="false" draggable overflow>
        <el-header>
			<div class="right-panel">
				<div class="right-panel-search">
                    <el-select v-model="search.inout_id" placeholder="收支事项" filterable>
                        <el-option v-for="item in matterList" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
					<el-date-picker v-model="search.date" :value-format="'YYYY-MM-DD'" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"/>
					<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
					<el-button type="primary" icon="el-icon-refresh" @click="refresh"></el-button>
                <sc-export-button :auth="'receive.recordexport'" :apiObj="apiObj" :search="search" :selection="selection" :params="query"></sc-export-button>
				</div>
			</div>
		</el-header>
        <el-main class="nopadding">
            <scTable ref="table" row-key="id" :apiObj="apiObj" @selection-change="selectionChange" stripe remoteSort remoteFilter border :params="query" height="550">
				<el-table-column type="selection" width="50" reserve-selection align="center"></el-table-column>
                <el-table-column label="日期" prop="date" align="center"></el-table-column>
                <el-table-column label="事项" prop="inout.name" align="center"></el-table-column>
                <el-table-column label="结算金额" prop="balance_price" align="center"></el-table-column>
                <el-table-column label="折扣金额" prop="discount_price" align="center"></el-table-column>
                <el-table-column label="实收金额" prop="real_price" align="center"></el-table-column>
                <el-table-column label="图片" prop="image" align="center">
                    <template #default="scope">
                        <el-image v-if="scope.row.image" style="width: 50px; height: 50px; border-radius: 5px;" :src="scope.row.image" :preview-src-list="[scope.row.image]" preview-teleported="true" hide-on-click-modal align="center"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="对应账户" prop="only_money" align="center">
                    <template #default="scope">
                        {{`【${scope.row.account?.account_bank}】${/^\d+$/.test(scope.row.account?.account) ? scope.row.account?.account.slice(-4) : ''}`}}
                        <!-- {{scope.row.customer_name}} -->
                    </template>
                </el-table-column>
                <el-table-column label="备注" prop="remark" align="center"></el-table-column>
                <el-table-column label="操作" fixed="right" align="center" width="100">
                    <template #default="scope">
                        <el-popconfirm title="确定删除吗?" @confirm="table_del(scope.row, scope.$index)">
                            <template #reference>
                                <el-button type="danger" size="small" v-auth="'receive.delete'">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>
		<template #footer>
			<el-button @click="visible = false">取 消</el-button>
		</template>
	</el-dialog>
</template>

<script>
export default {
    props:{
        query: { type: Object, default: () => ({}) },
    },
	emits: ['success', 'closed'],
	data() {
		return {
			mode: "add",
			titleMap: {
				add: '欠款单据',
				edit: '收款记录',
				show: '查看'
			},
			visible: false,
			isSaveing: false,
            apiObj: this.$API.business.finance.collect.record,
            selection: [],
            search: {
                date: null,
                inout_id: null,
            },
            matterList: [],
		}
	},
	mounted() {
        this.getMatter();
	},
	methods: {
        // 收支事项
        async getMatter() {
            var res = await this.$API.basic.matter.all.get();
            this.matterList = res.data
        },
		//显示
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this
		},
        setData(data){data},
        //表格选择后回调事件
		selectionChange(selection) {
			this.selection = selection;
		},
        upsearch() {
			this.$refs.table.upData(this.search)
		},
		refresh() {
			for (const key in this.search) {
				this.search[key] = null;
			}
			this.$refs.table.upData(this.search)
		},
        //删除
		async table_del(row) {
			var reqData = { id: row.id }
			var res = await this.$API.business.finance.collect.recorddel.post(reqData);
			if (res.code == 1) {
				this.$refs.table.refresh()
				this.$message.success("删除成功")
                this.$emit('success', this.form, this.mode)
			} else {
				this.$alert(res.message, "提示", { type: 'error' })
			}
		},
	}
}
</script>

<style></style>
